<template>
  <div>
      <div class='search'>
        <input 
          class='searchinput' 
          type="text" 
          placeholder='输入城市名或拼音'
          v-model='keyword'>
      </div>
      <div class='search-content border-bottom' ref='search' v-show='keyword'>
        <ul>
          <li 
            class='search-item'
            v-for='item of list'
            :key='item.id'
            @click='handelcityclick(item.name)'
          >
            {{item.name}}
          </li>
          <li class='search-item border-bottom' v-show='hasnodata'>
            没有找到匹配的城市
          </li>
        </ul>
      </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
import {mapMutations} from 'vuex'
export default {
  name:'citysearch',
  props:{
    city:Object
  },
  data(){
    return{
      keyword:'',
      list:[],
      timer:null
    }
  },
  computed:{
    hasnodata(){
      return !this.list.length
    }
  }, 
  watch:{
    keyword(){
      if(this.timer){
        clearTimeout(this.timer)
      }
      if(!this.keyword){
        this.list=[]
        return
      }
      this.timer=setTimeout(()=>{
        const result=[]
        for(let i in this.city){
          //遍历每个键值对应的数组中的数组项
          //indexOf:返回某个指定的字符串值在字符串中首次出现的位置,如果要检索的字符串值没有出现，则该方法返回 -1
          this.city[i].forEach((value)=>{
            if(value.spell.indexOf(this.keyword)>-1||
               value.name.indexOf(this.keyword)>-1){
                 result.push(value)
               }
          }) 
        }
        this.list=result
      },100)
    }
  },
  methods:{
    ...mapMutations(['changemutationcity']),
    handelcityclick(city){
      this.changemutationcity(city)
      //this.$store.commit('changemutationcity',city)
      this.$router.push('/')//编程式导航
    }
  },
  mounted(){
    this.scroll=new Bscroll(this.$refs.search)
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .search
    height:.72rem  
    padding:0 .1rem
    background:$bgcolor
    .searchinput
      box-sizing:border-box
      height:.62rem
      line-height:.62rem 
      width:100%
      padding:0 .1rem
      text-align:center
      border-radius:.06rem
      color:#666
  .search-content
    z-index:1
    overflow:hidden
    position:absolute 
    top:1.58rem 
    left:0
    right:0
    bottom:0
    background:#eee
    .search-item
      line-height:.62rem 
      padding-left:.2rem
      background:#fff
      color:#666
</style>
